<div class="layui-tab layui-tab-card">
    <ul class="layui-tab-title">
        <li class="layui-this">所有项目</li>
        <li>公开项目</li>
        <li>个人项目</li>
    </ul>
    <div class="layui-tab-content" style="height: 600px;">
        <div class="layui-tab-item layui-show">
            <p style="margin-top:15px;padding-left: 15px;">
                <button class="layui-btn layui-btn-xs">小程序</button>
                <button class="layui-btn layui-btn-xs">开源组件库</button>
                <button class="layui-btn layui-btn-xs">APP客户端</button>
            </p>
            <hr>
            <div id = "projectContent">
            </div>
        </div>
        <div class="layui-tab-item">未开发...</div>
        <div class="layui-tab-item">未开发...</div>
    </div>
</div>

<script>
    layui.use(['form', 'table', 'util', 'config', 'admin', 'formSelects'], function () {

        $.ajax({
            type : "get",
            url : "json/project.json",
            dataType: "json",
            // data : {"param1":"value1" , "param2":"value2"},
            success : function (data) {
                console.log(data);
                if (null == data || data.length == 0) {
                    return;
                }
                $.each(data,function (index, item) {
                    $("#projectContent").append(" <div><p style='margin-bottom: 30px;padding-left:15px;'>" 
                    + "<span style='font-size:20px;'>" 
                    + "<a href='#' class ='showDetailIFrame'>" + item + "</a>&nbsp;</span>" 
                    + "<button class='layui-btn layui-btn-xs'>JavaScript</button></p>" 
                    + "<p style='padding-left:15px;'>项目说明：代替文字代替文字代替文字代替文字代替文字代替文字代替文字代替文字代替文字代替文字</p><hr/></div>");
                });

                $(".showDetailIFrame").click(function (){
                    var pName = $(this).html();

                    //iframe层
                    layer.open({
                        type: 2,
                        title: 'Project明细',
                        shadeClose: true,
                        scrollbar: true,
                        shade: 0.8,
                        area: ['100%', '100%'],
                        content: 'components/system/projectDetail.html', //iframe的url
                        success: function(layero, index) {
                            var iframeBody = layer.getChildFrame('body', index);
                            iframeBody.find("#projectName").html(pName)
                        }
                    });
                    
                    return false;
                });
            }
            ,error : function (err) {
                console.log(err);
            }
        });



        
    });
</script>